<template>
  <div class="sun_main_aaa">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">活动管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 搜索 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-row class="search_row">
            <el-col :span="6" class="search_title">
              <div>地址:</div>
            </el-col>
            <el-col :span="18" class="scroll_input">
              <el-input
                  size="mini"
                  placeholder="检索地址"
                  v-model="filterText">
              </el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <div class="search_row">
            <el-button type="primary" size="mini" @click="queryList">搜索</el-button>
          </div>

        </el-col>
      </el-row>
      <div class="sun_table_th">
        <div style="padding: 20px"></div>
        <div class="sun_table_td">接口地址</div>
        <div class="sun_table_td">接口名称</div>
        <div class="sun_table_td">请求方式</div>
        <div class="sun_table_td">所需角色</div>
        <div class="sun_table_td">操作</div>
      </div>
      <div style="overflow: auto ;height: 450px;">
        <el-tree :data="data" show-checkbox :filter-node-method="filterNode" :props="defaultProps" ref="tree"
                 @check-change="handleCheckChange">
          <template slot-scope="{ node, data }">
            <div class="sun_table">
              <el-tooltip class="item" effect="dark" :content="data.purviewUrl" placement="bottom">
                <p class="sun_table_td">{{ data.purviewUrl }}</p>
              </el-tooltip>
              <el-tooltip class="item" v-if="data.purviewName" effect="dark" :content="data.purviewName"
                          placement="bottom">
                <p class="sun_table_td">{{ data.purviewName }}</p>
              </el-tooltip>
              <p class="sun_table_td" v-if="!data.purviewName"></p>

              <p class="sun_table_td">{{ data.method }}</p>
              <el-tooltip class="item" v-if="data.roleNames" effect="dark" :content="data.roleNames" placement="bottom">
                <p class="sun_table_td">{{ data.roleNames }}</p>
              </el-tooltip>
              <p class="sun_table_td" v-if="!data.roleNames"></p>
              <p class="sun_table_td">
                <!--修改-->
                <edit-box btn-type="edit"
                          @click.native="addEdit(data)"></edit-box>
              </p>
            </div>
          </template>
        </el-tree>
      </div>
    </el-card>
  </div>
</template>

<script>
import editBox from '../component/editBox'
import {queryMapList} from '@/api/MallSysPurviewApi.js'
import {Notification} from "element-ui";

export default {
  components: {editBox},
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'purview_url'
      },
      filterText: "",
      toSelect: []
    };
  },
  watch: {},
  methods: {
    queryList() {
      this.$refs.tree.filter(this.filterText);
    },
    queryPage() {
      queryMapList().then(res => {
        this.data = res.data.list
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.purview_url.indexOf(value) !== -1 || data.purview_name.indexOf(value) !== -1 || data.method.indexOf(value) !== -1;
    },
    /**
     * 选择的数据记录
     * @param data 数据
     * @param checked 是否被选中
     * @param indeterminate 子树中是否有被选中的节点
     */
    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.toSelect.push(data)
      } else {
        for (let i = 0; i < this.toSelect.length; i++) {
          if (this.toSelect[i].address === data.address) {
            delete this.toSelect[i];
          }
        }
      }
      console.log(this.toSelect);
    },
    addEdit(res) {
      let dataList = []
      if (res) {
        dataList.push(res)
      } else {
        this.toSelect.forEach(res1 => {
          if (res1) {
            dataList.push(res1)
          }
        })
        if (dataList.length<=0) {
          Notification.error({
            title: '错误',
            message: "请选择一个接口"
          })
          return;
        }
      }
      this.$router.push({path: '/ApiPurviewUptIndex', query: {arr: dataList}})

    }
  },
  created() {
    this.queryPage()
  }
};
</script>

<style lang="less" scoped>
.search_row {
  padding: 10px;

  .search_title {
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    margin-bottom: 20px;
  }

  .scroll_input {
    height: 30px;
  }
}

.sun_table {
  width: 100%;
  display: flex;

  .sun_table_td {
    padding-left: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 24%;
    text-align: center;
    //line-height: 60px;
  }
}

.sun_table_th {
  width: 100%;
  display: flex;
  background: rgb(17, 23, 57);
  font-size: 12px;
  height: 36px;
  color: #ffffff;
  line-height: 36px;

  .sun_table_td {
    padding-left: 15px;
    width: 24%;
    text-align: center;
  }
}

</style>
<style>
.sun_main_aaa .el-tree-node .el-tree-node__content {
  height: 60px;
}
</style>
